<template>
	<div class="active_template" v-loading="loading">
		<!--关联应用-->
		
		<el-alert
	    title="用于指定当前模版在部署运行时所依赖的其他应用类型，例如发布系统管理模块依赖mysql，此处应用选择mysql。关联关系分为应用外联和应用包裹，选择应用外联时，当前应用通过地址和端口连接其关联应用，应用包裹则是当前模板需要被包裹于其它应用部署 ，例如java war应用，需要被tomcat/jetty包裹，此类关系为应用包裹。"
	    type="info">
	  </el-alert>
		
		<addListTableBySlot
			ref="addListTableBySlot"
			:data="formData" :options="appOptions" @change="changeConfig">
			
			
			<template slot="expandSlot" slot-scope="{scope}" >
				
				  <div class="grey" v-if="!getInstList(scope.row.relaTemplateId,scope.row).length">
						请先部署实例
					</div>
					<div class="grey" v-else-if="!scope.row.selecArr||!scope.row.selecArr.length">
						请选择应用实例
					</div>
					<div v-else >
						<el-form v-for="(items,index) in scope.row.selecArr" :key="index" label-position="left" inline class="demo-table-expand">
							<el-form-item label="应用名称:">
		            <span>{{items.sourceData.instName}}</span>
		          </el-form-item>
		          <el-form-item label="应用状态:">
		            <span>{{items.sourceData.status}}</span>
		          </el-form-item>
		          <el-form-item label="容器ID:">
		            <span>{{scope.row.relaTemplateId}}</span>
		          </el-form-item>
		          <el-form-item label="容器名称:">
		            <span>{{scope.row.name}}</span>
		          </el-form-item>
		          <el-form-item label=" ">
		            <template v-for="hostItem in items.sourceData.hostsInfo">
                	<el-form-item v-if="hostItem.type||hostItem.type==0"  :label=" (hostItem.type==0? '虚拟机IP' : '容器IP'  ) + ':'">
                    <span>{{ hostItem.ip || " - "  }}</span>
                  </el-form-item>
                  <el-form-item v-if="hostItem.port" :label=" (hostItem.type==0? '虚拟机端口' : '容器端口'  ) + ':'">
                    <span>{{ hostItem.port || " - "  }}</span>
                  </el-form-item>
                </template>
		          </el-form-item>
	          </el-form>
					</div>
        
			</template>
			
			<template slot="activeTemplate" slot-scope="{scope}">
				<span v-if="onDeploy">
					{{scope.row.name}}
				</span>
				<mobanActiveSelect
					v-else
					:defaultValue="scope.row.relaTemplateId"
					@change="(name,v,selecArr)=>{scope.row.relaTemplateId=v;scope._self.emitDataChange()}"
					></mobanActiveSelect>
			</template>
			
			<template slot="relaInstIdSlot" slot-scope="{scope}">
				<baseSelect
					v-if="onDeploy&&scope.row.relaTemplateId"
					:defaultValue="scope.row.relaInstId"
					:optionList="getInstList(scope.row.relaTemplateId,scope.row)" 
					@change="(name,v,selecArr)=>{scope.row.relaInstId=v;scope.row.selecArr=selecArr;openRow(scope.row,true);scope._self.emitDataChange()}"
					></baseSelect>
			</template>
			
			<template slot="relaTypeSlot" slot-scope="{scope}">
				<span v-if="onDeploy">
					应用外联
				</span>
				<baseSelect 
					v-else
					:defaultValue="2" 
					:optionList="[{label:'应用外联',value:2}]" 
					@change="(name,v)=>{scope.row.relaType=v;scope._self.emitDataChange()}"
					>
				</baseSelect>
			</template>
			
			
		</addListTableBySlot>
		
			
	</div>
</template>

<script>
	import addListTableBySlot from "@/view/components/table/addListTableBySlot";
	import baseSelect from "@/view/components/select/select";
	import mobanActiveSelect from "@/view/components/select/mobanActiveSelect";
	import shiliSelect from "@/view/components/select/shiliSelect";
	import {getScussInstByTemplateId} from "@/service/swagger/AcAppInstController"

export default {
	props: [
		"onDeploy",
		//"autoAddList",
	],
	components: {
		baseSelect,
		addListTableBySlot,
		mobanActiveSelect,
		shiliSelect
	},
	data() {
		return {
			loading : false,
			formData : [],
			formData2 : [],
			InstList  : {
				
			},
			
			appOptions: {
				autoAddList : false ,
				editDisabled: false,
				header: [{
					label: "应用",
					propName: "relaTemplateId",
					slotName:"activeTemplate",
					align: "left",
				}, {
					label: "关联关系",
					propName: "relaType",
					slotName:"relaTypeSlot",
				}, {
					label: "提示",
					propName: "description",
					slotName:"descriptionSlot",
				},],
				defaultNewRow: {
					relaTemplateId: "",
					relaType: "2",
					description: "",
					relaInstId : "",
				},
			},
		}
	},
	mounted() {
		// 如果是部署时选择应用外联
		if(this.onDeploy){
			// 去除 删除 按钮
			this.appOptions.btnsConfig = {
				"delete" : {
					show : (row)=>{
						return !this.onDeploy ;
					},
				},
				"add" : {
					show : (row)=>{
						return !this.onDeploy ;
					},
				}
			}
			// 去除表头 “提示”
			this.appOptions.header.splice(2,1) 
			// 添加表头  “选择应用”
			this.appOptions.header.splice(1,0,{
				label: "选择应用",
				propName: "relaInstId",
				slotName:"relaInstIdSlot",
			})
			
			this.appOptions.header.splice(0,0,{
				label: "",
				propName: "",
				slotName:"expandSlot",
				type : "expand" ,
			})
			
			this.appOptions.defaultNewRow = null;
			
			// 开启二级table
			// this.appOptions.header[0].type="expand";
		}
		
	},
	methods: {
		
		initData(data){
			this.formData = data || [] ;
			this.$refs.addListTableBySlot.initListData(this.formData)
		},
		
		changeConfig(name, v) {
			console.log( "自定义 添加编辑 列表数据变更", name, v)
			this.formData2 = v ;
			this.emitChange();
		}, 
		
		emitChange(){
			this.$emit("change","activeTemplate", this.formData2 , this.deployModelList )
		},
		
		
		getInstList(tempId,row){
			if(!tempId){
				return [];
			}else if(this.InstList[tempId]){
				return this.InstList[tempId]
			}else{
				let arr = [];
				getScussInstByTemplateId({
					templateId : tempId
				}).then(ret=>{
					if(!ret.code && ret.data){
						ret.data.forEach(el=>{
							arr.push({
								label : el.appName ,
								value : el.instId ,
								sourceData : el,
							})
						})
					}
				})
				this.InstList[tempId] = arr ;
				return arr;
			}
		},
		
		openRow(row,b){
			this.$refs.addListTableBySlot.$refs.table.toggleRowExpansion(row,b);
		},
		
	}

}
</script>

<style lang="scss">
	.active_template .el-table__expanded-cell {
		background: #f3f8fc;
		
		
		.el-form-item,.el-form-item__label,.el-form-item__content {
			margin-bottom: 0 !important;
			font-size: 12px;
		}
	}
</style>